<template>
  <a-form @finish="submit" :model="form" :label-col="{ span: 6 }" ref="formRef">
    <a-card title="新建单页">
      <a-row :gutter="12">
        <a-col :span="16">
          <a-form-item required label="页面名称" name="menuName" help="桌面上显示的名称">
            <a-input allow-clear v-model:value="form.menuName"></a-input>
          </a-form-item>

          <a-form-item required label="创建文件">
            <a-radio-group :options="isOptions" v-model:value="form.fileCreated"></a-radio-group>
          </a-form-item>

          <a-form-item required label="页面图标" name="icon">
            <a-input allow-clear v-model:value="form.icon">
              <template #addonAfter>
                <Gallery v-model="form.icon"></Gallery>
              </template>
            </a-input>
          </a-form-item>

          <a-form-item required label="功能排序" name="orderNum">
            <Sort v-model="form.orderNum" :total="10"></Sort>
          </a-form-item>
          <a-form-item required label="前端根目录" name="filePath">
            <a-input allow-clear v-model:value="form.filePath">
              <template #addonAfter>
                <Path v-model="form.filePath"></Path>
              </template>
            </a-input>
            <template #help>指定项目的根目录</template>
          </a-form-item>
          <a-form-item label="菜单父级">
            <a-tree-select
              v-model:value="form.parentId"
              :field-names="{
                value: 'menuId',
                label: 'menuName',
              }"
              :tree-data="menuTree"
            ></a-tree-select>
          </a-form-item>

          <a-form-item required label="文件相对路径" name="component">
            <a-input v-model:value="form.component" placeholder="test/test/index">
              <template #addonAfter>.vue</template>
            </a-input>
            <template #help>
              <div class="text-gray-400">相对于/src/views/modules/**的路径</div>
            </template>
          </a-form-item>

          <a-row>
            <a-col :offset="6" :span="18">
              <a-divider></a-divider>
              <a-button size="middle" type="primary" htmlType="submit">新建</a-button>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-card title="功能介绍">
            <div>创建一个菜单，且生成对应的页面</div>
            <a-divider></a-divider>
            <div>
              <div class="text-gray-600">完整路径</div>
              <div>
                {{ form.filePath }}
              </div>
              <div class="text-wrap">
                {{ `/src/views/modules/${form.component}.vue` }}
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <template #extra>
        <a-tooltip title="前往帮助中心">
          <a
            class="system__icon"
            target="_blank"
            href="https://www.yuque.com/u32997899/ax/texzsqhcl7r1k953?singleDoc# 《多页生成》"
          >
            <QuestionCircleTwoTone />
          </a>
        </a-tooltip>
      </template>
    </a-card>
  </a-form>
</template>

<script setup lang="ts">
import { MenuTypeEnum, type SystemMenu } from '@/api/modules/system/menu/types';
import { getParentMenus } from '@/api/modules/system/menu/utils';
import { generateSinglePage } from '@/api/modules/tool/gen/gen';
import { isOptions } from '@/global/options/system';
import Sort from '@/views/components/sort/Sort.vue';
import Gallery from '@/views/selector/gallery/Gallery.vue';
import Path from '@/views/selector/path/Path.vue';

const menuTree = ref();

type PageConfig = SystemMenu & {
  /* 文件路径 */
  filePath: string;
  /* 生成的页面类型 */
  type: 'single';
  /* 是否创建文件 */
  fileCreated: '0' | '1';
};

let pageConfig: PageConfig = {
  menuName: '',
  orderNum: 0,
  path: '',
  component: '',
  menuType: MenuTypeEnum.MENU,
  icon: '',
  filePath: '',
  type: 'single',
  parentId: 0,
  fileCreated: '0',
};

const formRef = ref<HTMLFormElement>();
const form = ref<PageConfig>({
  ...pageConfig,
});

onMounted(async () => {
  menuTree.value = await getParentMenus();
});
const submit = async () => {
  try {
    await generateSinglePage(form.value);
    if (formRef.value) {
      formRef.value.resetFields();
    }
  } catch (error) {}
};
</script>

<style lang="scss" scoped></style>
